*{
    margin:0;
    padding: 0;
    box-sizing:border-box;

}
html{
    font-size:10px;
}
body{
    background:#080808;
    color:#fafafa;
    text-align:center;
}
h2{
    font-size: 4rem;
    margin-bottom: 5rem;
}
.wrapper{
    position: relative;
    width:30rem;
    height: 30rem;
    margin:6rem auto 5rem;
    perspective: 100rem;
}
.wrapper .cube{
    width:100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition:transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.wrapper .cube img{
    width:100%;
    display: block;
    position: absolute;
    height: 100%;
}
.img1{
    transform:translateZ(15rem);
}
.img2{
    transform:rotateX(-180deg) translateZ(15rem);
}
.img3{
    transform:rotateY(90deg) translateZ(15rem);
}
.img4{
    transform:rotateY(-90deg) translateZ(15rem);
}
.img5{
    transform:rotateX(90deg) translateZ(15rem)
}
.img6{
    transform:rotateX(90deg) translateZ(-15rem) rotate(180deg);
}
.img-buttons{
    display: grid;
    grid-template-columns:105px 105px 105px;  /*每列*/
    grid-template-rows:85px 85px;
    justify-content: center;  
    grid-gap: 4.5rem;
}

.img-buttons input{
    width: 105px;
    outline:none;
   border:2px solid #fafafa;
   
}
.img-buttons input:focus{
    border:2px solid #e70;
}
.cube.cubeFP{
    transform: translateZ(-15rem) rotateX(-15deg) rotateY(15deg);
}
.cube.show-imge-1{
    transform: translateZ(-15rem);
}
.cube.show-imge-2{
    transform: translateZ(-15rem) rotateX(180deg);
}
.cube.show-imge-3{
    transform: translateZ(-15rem) rotateY(-90deg);
}
.cube.show-imge-4{
    transform: translateZ(-15rem) rotateY(90deg);
}
.cube.show-imge-5{
    transform: translateZ(-15rem) rotateX(-90deg);
}
.cube.show-imge-6{
    transform: translateZ(-15rem) rotateX(90deg);
}